<template>
  <nut-config-provider :theme="theme" :theme-vars="themeVars">
    <view :style="{backgroundColor: themeVars.pageBackgroundColor,padding: themeVars.pagePadding,height:'100vh'}">

      <nut-skeleton :loading="twProductCategoryTwoCatListLoading" width="250px" height="15px" animated row="3">

      <two-cat v-if="data.length > 0" @childrenClick="childrenClick" :data="item" v-for="item in data"></two-cat>
      <nut-empty v-else :image="emptyUrl()" :image-size="100" description="暂无数据"/>
      </nut-skeleton>
    </view>

  </nut-config-provider>
</template>

<script  >
import {ref} from 'vue';
import {IconFont} from '@nutui/icons-vue'
import useTheme from "../../../hooks/useTheme";
import TwoCat from "../../../components/twoCat/index.vue";

const {theme, themeVars} = useTheme()

import {reactive, toRefs, onMounted} from 'vue'
import Taro, {useDidShow} from "@tarojs/taro";
import {twProductCategoryTwoCatList} from "../../../api/productCategory";
import {emptyUrl} from "../../../utils/imgUtils";


const data = ref([]);
const twProductCategoryTwoCatListLoading = ref(false)
const childrenClick = (item) => {
  console.log(item)
  Taro.navigateTo({url: `/pages/view/categoryCommodity/index?tid=${item.id}&pathName=${item.name}`})

}

export default {
  methods: {
    emptyUrl() {
      return emptyUrl
    }
  },
  components: {IconFont},

  // 可以使用所有的 Vue 生命周期方法
  mounted() {
  },

  onLoad(options) {
    twProductCategoryTwoCatListLoading.value=true;
    twProductCategoryTwoCatList(options.id).then(res=>{
      if (200 == res.code) {
        data.value = res.data;
        console.log("twProductCategoryTwoCatList",res.data)

      }
    }).finally(()=>{
      Taro.hideLoading();
      twProductCategoryTwoCatListLoading.value=false;
    })
    Taro.setNavigationBarTitle({
      title: options.name
    })
  },

  onReady() {
  },

  onShow() {
   },

  onHide() {
  },

  onPullDownRefresh() {
    console.log("onPullDownRefresh")
   },
  onReachBottom() {
    console.log("onReachBottom")
   },


  setup() {


    return {
      theme,
      themeVars,
      data,
      Taro,
      twProductCategoryTwoCatListLoading,
      childrenClick
    }
  }

}



</script>

<style>


.search-place {
  width: 233px;
  height: 50px;
  background: white;
  border-radius: 29px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.data-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20px;
  width: 100%;
}

.data-num-show {
  display: flex;
  font-size: 24px;
  height: 29px;
  color: #D80000;

}

.top-box {
  display: flex;
}


</style>